<template>
  <div class="app-container">

    
    <el-card class="box-card">
      <el-table
        :data="noticeList"
        v-loading="loading"
        style="width: 100%"
      >
        <el-table-column prop="type" label="通知类型" width="150">
          <template #default="{ row }">
            <el-tag :type="getNoticeTypeTag(row.type)" size="small">
              {{ getNoticeTypeName(row.type) }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column prop="name" label="配置名称" width="200" />
        
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.status ? 'success' : 'danger'" size="small">
              {{ row.status ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column prop="effectiveTime" label="生效时间" width="200" />
        
        <el-table-column prop="description" label="配置说明" min-width="200" show-overflow-tooltip />
        
        <el-table-column label="操作" width="120" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" link @click="openConfig(row)">
              配置
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 配置弹窗 -->
    <el-dialog
      v-model="configVisible"
      :title="configTitle"
      width="600px"
      append-to-body
      destroy-on-close
    >
      <el-form ref="configFormRef" :model="configForm" :rules="configRules" label-width="120px">
        <el-form-item label="通知类型">
          <el-tag :type="getNoticeTypeTag(configForm.type)" size="small">
            {{ getNoticeTypeName(configForm.type) }}
          </el-tag>
        </el-form-item>
        
        <el-form-item label="配置名称" prop="name">
          <el-input v-model="configForm.name" placeholder="请输入配置名称" />
        </el-form-item>
        
        <el-form-item label="是否启用" prop="status">
          <el-switch
            v-model="configForm.status"
            :active-value="true"
            :inactive-value="false"
          />
        </el-form-item>
        
        <el-form-item label="生效时间" prop="effectiveTime">
          <el-date-picker
            v-model="configForm.effectiveTime"
            type="datetime"
            placeholder="选择生效时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            style="width: 100%"
          />
        </el-form-item>
        
        <!-- 短信通知配置 -->
        <template v-if="configForm.type === 'sms'">
          <el-form-item label="短信签名" prop="smsSignature">
            <el-input v-model="configForm.smsSignature" placeholder="请输入短信签名" />
          </el-form-item>
          
          <el-form-item label="短信密钥" prop="smsSecret">
            <el-input v-model="configForm.smsSecret" type="password" placeholder="请输入短信密钥" show-password />
          </el-form-item>
          
          <el-form-item label="接收手机号" prop="phoneNumbers">
            <el-input
              v-model="configForm.phoneNumbers"
              type="textarea"
              :rows="3"
              placeholder="请输入手机号，多个手机号用逗号分隔"
            />
          </el-form-item>
        </template>
        
        <!-- 邮箱通知配置 -->
        <template v-if="configForm.type === 'email'">
          <el-form-item label="SMTP服务器" prop="smtpHost">
            <el-input v-model="configForm.smtpHost" placeholder="请输入SMTP服务器地址" />
          </el-form-item>
          
          <el-form-item label="SMTP端口" prop="smtpPort">
            <el-input-number v-model="configForm.smtpPort" :min="1" :max="65535" style="width: 100%" />
          </el-form-item>
          
          <el-form-item label="发送邮箱" prop="senderEmail">
            <el-input v-model="configForm.senderEmail" placeholder="请输入发送邮箱" />
          </el-form-item>
          
          <el-form-item label="邮箱密码" prop="emailPassword">
            <el-input v-model="configForm.emailPassword" type="password" placeholder="请输入邮箱密码" show-password />
          </el-form-item>
          
          <el-form-item label="接收邮箱" prop="receiverEmails">
            <el-input
              v-model="configForm.receiverEmails"
              type="textarea"
              :rows="3"
              placeholder="请输入接收邮箱，多个邮箱用逗号分隔"
            />
          </el-form-item>
        </template>
        
        <!-- 小程序通知配置 -->
        <template v-if="configForm.type === 'miniprogram'">
          <el-form-item label="小程序AppID" prop="appId">
            <el-input v-model="configForm.appId" placeholder="请输入小程序AppID" />
          </el-form-item>
          
          <el-form-item label="小程序密钥" prop="appSecret">
            <el-input v-model="configForm.appSecret" type="password" placeholder="请输入小程序密钥" show-password />
          </el-form-item>
          
          <el-form-item label="模板ID" prop="templateId">
            <el-input v-model="configForm.templateId" placeholder="请输入消息模板ID" />
          </el-form-item>
        </template>
        
        <!-- PC端弹窗通知配置 -->
        <template v-if="configForm.type === 'popup'">
          <el-form-item label="弹窗标题" prop="popupTitle">
            <el-input v-model="configForm.popupTitle" placeholder="请输入弹窗标题" />
          </el-form-item>
          
          <el-form-item label="弹窗持续时间" prop="popupDuration">
            <el-input-number v-model="configForm.popupDuration" :min="1" :max="60" style="width: 100%" />
            <span style="margin-left: 10px; color: #666;">秒</span>
          </el-form-item>
          
          <el-form-item label="弹窗位置" prop="popupPosition">
            <el-select v-model="configForm.popupPosition" placeholder="请选择弹窗位置" style="width: 100%">
              <el-option label="右上角" value="top-right" />
              <el-option label="右下角" value="bottom-right" />
              <el-option label="左上角" value="top-left" />
              <el-option label="左下角" value="bottom-left" />
            </el-select>
          </el-form-item>
        </template>
        
        <el-form-item label="配置说明" prop="description">
          <el-input
            v-model="configForm.description"
            type="textarea"
            :rows="2"
            placeholder="请输入配置说明"
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <div style="text-align: right">
          <el-button type="primary" @click="saveConfig">保 存</el-button>
          <el-button @click="configVisible = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

// 页面数据
const loading = ref(false)
const configVisible = ref(false)
const configTitle = ref('')
const configFormRef = ref()

// 通知类型配置
const noticeTypes = [
  { type: 'sms', name: '短信通知', color: 'success' },
  { type: 'email', name: '邮箱通知', color: 'primary' },
  { type: 'miniprogram', name: '小程序通知', color: 'warning' },
  { type: 'popup', name: 'PC端弹窗通知', color: 'info' }
]

// 通知列表数据
const noticeList = ref([
  {
    type: 'sms',
    name: '短信通知配置',
    status: true,
    effectiveTime: '2024-01-01 00:00:00',
    description: '通过短信方式发送报警通知',
    smsSignature: '',
    smsSecret: '',
    phoneNumbers: ''
  },
  {
    type: 'email',
    name: '邮箱通知配置',
    status: true,
    effectiveTime: '2024-01-01 00:00:00',
    description: '通过邮件方式发送报警通知',
    smtpHost: '',
    smtpPort: 587,
    senderEmail: '',
    emailPassword: '',
    receiverEmails: ''
  },
  {
    type: 'miniprogram',
    name: '小程序通知配置',
    status: false,
    effectiveTime: '2024-01-01 00:00:00',
    description: '通过微信小程序发送报警通知',
    appId: '',
    appSecret: '',
    templateId: ''
  },
  {
    type: 'popup',
    name: 'PC端弹窗通知配置',
    status: true,
    effectiveTime: '2024-01-01 00:00:00',
    description: '在PC端弹出报警通知窗口',
    popupTitle: '报警通知',
    popupDuration: 5,
    popupPosition: 'top-right'
  }
])

// 配置表单
const configForm = reactive({
  type: '',
  name: '',
  status: true,
  effectiveTime: '',
  description: '',
  // 短信配置
  smsSignature: '',
  smsSecret: '',
  phoneNumbers: '',
  // 邮箱配置
  smtpHost: '',
  smtpPort: 587,
  senderEmail: '',
  emailPassword: '',
  receiverEmails: '',
  // 小程序配置
  appId: '',
  appSecret: '',
  templateId: '',
  // 弹窗配置
  popupTitle: '',
  popupDuration: 5,
  popupPosition: 'top-right'
})

// 表单验证规则
const configRules = {
  name: [{ required: true, message: '请输入配置名称', trigger: 'blur' }],
  effectiveTime: [{ required: true, message: '请选择生效时间', trigger: 'change' }],
  smsSignature: [
    { 
      required: true, 
      message: '请输入短信签名', 
      trigger: 'blur',
      validator: (rule, value, callback) => {
        if (configForm.type === 'sms' && !value) {
          callback(new Error('请输入短信签名'))
        } else {
          callback()
        }
      }
    }
  ],
  phoneNumbers: [
    { 
      required: true, 
      message: '请输入接收手机号', 
      trigger: 'blur',
      validator: (rule, value, callback) => {
        if (configForm.type === 'sms' && !value) {
          callback(new Error('请输入接收手机号'))
        } else {
          callback()
        }
      }
    }
  ],
  smtpHost: [
    { 
      required: true, 
      message: '请输入SMTP服务器', 
      trigger: 'blur',
      validator: (rule, value, callback) => {
        if (configForm.type === 'email' && !value) {
          callback(new Error('请输入SMTP服务器'))
        } else {
          callback()
        }
      }
    }
  ],
  senderEmail: [
    { 
      required: true, 
      message: '请输入发送邮箱', 
      trigger: 'blur',
      validator: (rule, value, callback) => {
        if (configForm.type === 'email' && !value) {
          callback(new Error('请输入发送邮箱'))
        } else {
          callback()
        }
      }
    }
  ],
  receiverEmails: [
    { 
      required: true, 
      message: '请输入接收邮箱', 
      trigger: 'blur',
      validator: (rule, value, callback) => {
        if (configForm.type === 'email' && !value) {
          callback(new Error('请输入接收邮箱'))
        } else {
          callback()
        }
      }
    }
  ],
  appId: [
    { 
      required: true, 
      message: '请输入小程序AppID', 
      trigger: 'blur',
      validator: (rule, value, callback) => {
        if (configForm.type === 'miniprogram' && !value) {
          callback(new Error('请输入小程序AppID'))
        } else {
          callback()
        }
      }
    }
  ],
  templateId: [
    { 
      required: true, 
      message: '请输入模板ID', 
      trigger: 'blur',
      validator: (rule, value, callback) => {
        if (configForm.type === 'miniprogram' && !value) {
          callback(new Error('请输入模板ID'))
        } else {
          callback()
        }
      }
    }
  ],
  popupTitle: [
    { 
      required: true, 
      message: '请输入弹窗标题', 
      trigger: 'blur',
      validator: (rule, value, callback) => {
        if (configForm.type === 'popup' && !value) {
          callback(new Error('请输入弹窗标题'))
        } else {
          callback()
        }
      }
    }
  ]
}

// 获取通知类型名称
function getNoticeTypeName(type) {
  const noticeType = noticeTypes.find(item => item.type === type)
  return noticeType ? noticeType.name : type
}

// 获取通知类型标签颜色
function getNoticeTypeTag(type) {
  const noticeType = noticeTypes.find(item => item.type === type)
  return noticeType ? noticeType.color : 'default'
}

// 打开配置弹窗
function openConfig(row) {
  configTitle.value = `配置${getNoticeTypeName(row.type)}`
  
  // 重置表单
  Object.keys(configForm).forEach(key => {
    if (row[key] !== undefined) {
      configForm[key] = row[key]
    } else {
      configForm[key] = ''
    }
  })
  
  configVisible.value = true
}

// 保存配置
function saveConfig() {
  configFormRef.value.validate((valid) => {
    if (!valid) return
    
    // 这里应该调用API保存配置
    ElMessage.success('配置保存成功')
    configVisible.value = false
    
    // 更新列表数据
    const index = noticeList.value.findIndex(item => item.type === configForm.type)
    if (index !== -1) {
      Object.assign(noticeList.value[index], { ...configForm })
    }
  })
}

onMounted(() => {
  // 页面初始化
})
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  background: #F1F2F5;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 20px;
  
  h2 {
    font-size: 24px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 8px 0;
  }
  
  p {
    font-size: 14px;
    color: #666;
    margin: 0;
  }
}

.box-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

// 表格样式
:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
  
  .el-table__header {
    background-color: #f8f9fa;
  }
  
  .el-table__row:hover {
    background-color: #f5f7fa;
  }
}

// 弹窗样式
:deep(.el-dialog) {
  border-radius: 8px;
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: #606266;
}
</style>
